<!-- 网络社交 -->
<template>
	<view class="card d-flex">
		<view class="card_head relative d-flex mb-30">
			<text class="card_head_title relative">网络社交异常检测</text>
		</view>
		
		<view class="card_content d-flex mb-30">
			<view class="card_list d-flex pb-40 mb-40">
				<view class="card_list_item d-flex mb-30">
					<Icon name="checkmark" class="mr-20" color="#FE6B66" />
					<text class="card_list_item_val">与资料包装中介有关联</text>
				</view>
				<view class="card_list_item d-flex mb-30">
					<Icon name="checkmark" class="mr-20" color="#C2C9CD" />
					<text class="card_list_item_val">疑似与异常行业有关联</text>
				</view>
				<view class="card_list_item d-flex">
					<Icon name="checkmark" class="mr-20" color="#C2C9CD" />
					<text class="card_list_item_val">疑似虚假资料</text>
				</view>
			</view>
			
			<view class="card_list d-flex pb-40 mb-40">
				<view class="card_list_item d-flex mb-30">
					<Icon name="checkmark" class="mr-20" color="#FE6B66" />
					<text class="card_list_item_val">疑似羊毛党</text>
				</view>
				<view class="card_list_item d-flex mb-30">
					<Icon name="checkmark" class="mr-20" color="#C2C9CD" />
					<text class="card_list_item_val">身份信息存疑</text>
				</view>
				<view class="card_list_item d-flex">
					<Icon name="checkmark" class="mr-20" color="#C2C9CD" />
					<text class="card_list_item_val">有严重异常行为</text>
				</view>
			</view>
			
			<view class="card_list d-flex">
				<view class="card_list_item d-flex mb-30">
					<Icon name="checkmark" class="mr-20" color="#FE6B66" />
					<text class="card_list_item_val">存在失信行为</text>
				</view>
				<view class="card_list_item d-flex mb-30">
					<Icon name="checkmark" class="mr-20" color="#C2C9CD" />
					<text class="card_list_item_val">存在支付异常行为</text>
				</view>
				<view class="card_list_item d-flex mb-30">
					<Icon name="checkmark" class="mr-20" color="#C2C9CD" />
					<text class="card_list_item_val">存在其他异常行为</text>
				</view>
				<view class="card_list_item d-flex">
					<Icon name="checkmark" class="mr-20" color="#C2C9CD" />
					<text class="card_list_item_val">上网环境异常</text>
				</view>
			</view>
		</view>
		
		
		<view class="card_content d-flex">
			<view class="tips d-flex mb-10">
				<Icon class="mr-10" name="info-circle" size="28rpx" color="#FF0000" />
				<text class="tips_txt">
					提示：<br />
					是否与黑中介有关联：与从事包装客户资料，伪造客户资料，冒用客户资料，套取机构政策等职业的用户或者机构成员有关联。<br />
是否疑似与异常行业有关联：互联网行为疑似涉嫌色情、赌博、毒品等不良行为。<br />
是否疑似虚假资料：在社交平台提供过虚假资料，或者有恶意申请/操作记录，或者个人信息疑似泄漏、冒用、伪造等。<br />
是否疑似羊毛党：在网贷、电商、020等平台有薅羊毛行为的用户。<br />
是否身份信息存疑：未获取到社交平台中的身份信息或者身份信息(身份证、手机号、姓名)疑似涉嫌伪造。<br />
是否严重异常行为：疑似有恶意消费的行为。<br />
是否存在失信行为：客户有失信行为。<br />
是否存在支付异常行为：支付行为异常包括支付频次、额度、场景等方面有过异常行为。<br />
是否存在其他异常行为：用户和以下高风险行为可能存在较高关联度:被盗风险较高、社交圈子不固定、地理圈子变化较大。<br />
是否上网环境异常：用户上网时，有使用虚机、代理设备、代理IP、猫池等行为。<br />
				</text>
			</view>
			
			<view class="menu d-flex">
				<view class="menu_icon mr-10" :style="{transform: menu ? 'rotateZ(0deg)' : 'rotateZ(180deg)'}"><Icon name="arrow-up" color="#6642EA" size="20rpx" /></view>
				{{ menu ? '收缩' : '展开' }}
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		reactive,
		ref,
		onMounted,
		nextTick
	} from 'vue'
	import Icon from '@/components/Icon/index.vue';
</script>

<style lang="scss" scoped>
.card {
	flex-direction: column;
	
	&_content {
		flex-direction: column;
	}
	
	&_list {
		flex-direction: column;
		&:not(:last-child) {
			border-bottom: 1px dashed rgb(220, 223, 230);
		}
		
		&_item {
			&_val {
				font: {
					size: 24rpx
				}
			}
		}
	}
}

	.tips {
		align-items: baseline;
		transition: .3s;
		&_txt {
			line-height: 45rpx;
			color: #6C7282;
			font: {
				size: 27rpx
			}
		}
	}
	
	.menu {
		margin-left: auto;
		align-items: center;
		color: #6642EA;
		font: {
			size: 25rpx
		}
		
		&_icon {
			transition: .3s;
			padding: 3rpx;
			border-radius: 50%;
			border: 1px solid #6642EA;
		}
	}
</style>
